import QtQuick 2.0
import "./Components"
Rectangle{
    x:212
    y:50
    id:root
    DarkSquare{
        id:sub_1
        x:212
        y:50
        width: 120
        height: 240
        Column{ //列布局
            id:column
            anchors.centerIn: parent
            spacing: 8
            RedSquare{

            }
            GreenSquare{
                width: 96
            }
            BlueSquare{

            }
        }
    }
    BrightSquare{
        id:sub_2
        x:412
        y:50
        width: 300
        height: 100
        Row{ //行布局
            id: row_1
            anchors.centerIn: parent
            spacing: 20
            BlueSquare{

            }
            GreenSquare{

            }
            RedSquare{

            }
        }
    }
    BrightSquare{
        id:sub_3
        x:812
        y:50
        width: 200
        height: 200
        Grid{ //网格布局
            id:grid_1
            rows:2
            columns: 2
            anchors.centerIn: parent
            spacing: 8
            RedSquare{

            }
            RedSquare{

            }
            RedSquare{

            }
            RedSquare{

            }
        }
    }
    BrightSquare{
        id:sub_4
        x:212
        y:300
        width: 200
        height: 200
        Flow{ //流布局
            anchors.fill: parent
            anchors.margins: 20
            spacing: 20
            RedSquare{

            }
            BlueSquare{

            }
            GreenSquare{

            }
        }
    }
    DarkSquare{
        id:sub_5
        width: 300
        height: 300
        x:612
        y:300
        property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
        Grid{
            anchors.fill: parent
            anchors.margins: 8
            spacing: 8
            Repeater{
                model:16
                Rectangle{
                    width: 56
                    height: 56
                    property int colorIndex: Math.floor(Math.random()*3)
                    color: sub_5.colorArray[colorIndex]
                    border.color: Qt.lighter(color)
                    Text{
                        anchors.centerIn: parent
                        color: "#f0f0f0"
                        text: "Cell "+index
                    }
                }
            }
        }
    }



}
